<template>
	<view class="imageBox">
		<view v-if="imageList.length === 0" class="container">
		</view>

		<view v-else-if="imageList.length === 1" class="container">
			<image :src="imageList[0]" class="image singleImage" mode="aspectFill" @click.stop="showImage(0)"></image>
		</view>

		<view v-else-if="imageList.length === 2" class="container">
			<image v-for="index in 2" :src="imageList[index - 1]" class="image doubleImage" mode="aspectFill"
				@click.stop="showImage(index-1)"></image>
		</view>

		<view v-else-if="imageList.length === 3" class="container">
			<image v-for="index in 3" :src="imageList[index - 1]" class="image tripleImage" mode="aspectFill"
				@click.stop="showImage(index-1)"></image>
		</view>

		<view v-else-if="imageList.length === 4">
			<view class="container">
				<image v-for="index in 2" :src="imageList[index - 1]" class="image doubleImage" mode="aspectFill"
					@click.stop="showImage(index-1)">
				</image>
			</view>
			<view class="container">
				<image v-for="index in 2" :src="imageList[index + 1]" class="image doubleImage" mode="aspectFill"
					@click.stop="showImage(index+1)">
				</image>
			</view>
		</view>

		<view v-else>
			<view class="container">
				<image v-for="index in 2" :src="imageList[index - 1]" class="image doubleImage" mode="aspectFill"
					@click.stop="showImage(index-1)">
				</image>
			</view>
			<view class="container">
				<image :src="imageList[2]" class="image doubleImage" mode="aspectFill" @click.stop="showImage(2)">
				</image>
				<view class="box image doubleImage">
					<image :src="imageList[3]" class="doubleImage" mode="aspectFill"></image>
					<view class="more" @click.stop="showImage(3)">更多</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps(["imageList"]);

	const showImage = function(index) {
		uni.previewImage({
			current: index,
			urls: props.imageList
		})
	}
</script>

<style lang="scss" scoped>
	.image {
		margin: 1px;
		border-radius: 5px;
	}

	.imageBox {
		margin: 5px;
	}

	.container {
		display: flex;
	}

	.singleImage {
		width: 300px;
		height: 300px;
	}

	.doubleImage {
		width: 150px;
		height: 150px;
	}

	.tripleImage {
		width: 100px;
		height: 100px;
	}

	.quadrupleImage {
		width: 100px;
		height: 100px;
	}

	.box {
		width: 150px;
		height: 150px;
		border-radius: 5px;
		overflow: hidden;
		position: relative;
	}

	.more {
		width: 100%;
		height: 100%;
		position: absolute;
		bottom: 0px;
		left: 0px;
		background: rgba(0, 0, 0, 0.2);
		color: #dfdfdf;
		display: flex;
		align-items: center;
		justify-content: center;
		backdrop-filter: blur(100rpx);
		font-size: 20px;
		font-weight: bolder;
	}
</style>